<!-- 首页组件 -->
<template>
	<div id="home-page">
		<!-- 网站标题和介绍 -->
		<div class="hero-section">
			<div class="hero-content">
				<h1 class="main-title">
					<img :src="logoImg" alt="AI" class="title-icon" />
					<span>NoCode网站秒搭平台</span>
				</h1>
				<p class="subtitle">一句话轻松创建网站应用</p>

				<!-- 用户提示词输入框 -->
				<div class="input-section">
					<div class="input-content">
						<a-textarea
							v-model:value="userPrompt"
							:placeholder="currentPlaceholder"
							class="prompt-input"
							:autoSize="{ minRows: 4, maxRows: 8 }"
							@keydown="handleKeyDown"
							@focus="stopTypewriter"
							@blur="startTypewriter"
						/>
					</div>
					<div class="input-actions">
						<span class="input-tip">{{ creating ? '创建中，请稍等...' : 'Shift + Enter 换行' }}</span>
						<span class="char-count">{{ userPrompt.length }} 字符</span>
						<a-button type="primary" size="large" @click="createApp" :loading="creating" class="create-btn">
							<template #icon>
								<SendOutlined />
							</template>
							生成应用
						</a-button>
					</div>
				</div>

				<!-- 示例应用按钮 -->
				<div class="example-section">
					<div class="example-buttons">
						<a-button
							v-for="example in examples"
							:key="example.title"
							@click="useExample(example.description)"
							class="example-btn"
						>
							{{ example.title }}
						</a-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 我的应用列表 -->
		<div class="apps-section" v-if="loginUserStore.loginUser?.id">
			<div class="section-header">
				<h2>我的作品</h2>
				<div class="header-actions">
					<a-select
						v-model:value="myAppsSortType"
						placeholder="排序方式"
						class="sort-select"
						@change="handleMyAppsSortChange"
						:suffixIcon="null"
					>
						<template #suffixIcon>
							<DownOutlined :style="{ color: '#666', fontSize: '12px' }" />
						</template>
						<a-select-option value="latest">
							<div class="sort-option">
								<ClockCircleOutlined />
								<span>最新创建</span>
							</div>
						</a-select-option>
						<a-select-option value="deployed">
							<div class="sort-option">
								<RocketOutlined />
								<span>已部署优先</span>
							</div>
						</a-select-option>
						<a-select-option value="generating">
							<div class="sort-option">
								<PlayCircleOutlined />
								<span>生成中优先</span>
							</div>
						</a-select-option>
						<a-select-option value="name">
							<div class="sort-option">
								<SortAscendingOutlined />
								<span>名称排序</span>
							</div>
						</a-select-option>
						<a-select-option value="default">
							<div class="sort-option">
								<OrderedListOutlined />
								<span>默认排序</span>
							</div>
						</a-select-option>
					</a-select>
					<a-input-search
						v-model:value="myAppsSearchText"
						placeholder="搜索我的应用..."
						@search="searchMyApps"
						@change="onMyAppsSearchChange"
						class="search-input"
					/>
				</div>
			</div>

			<div class="apps-grid">
				<AppCard
					v-for="(app, index) in myApps"
					:key="app.id"
					:app="app"
					:show-owner-info="true"
					:show-generate-status="true"
					:style="{ animationDelay: `${index * 100}ms` }"
					@view-chat="goToAppChat"

					@edit="editApp"
					@delete="deleteApp"
					@undeploy="handleUndeployApp"
				/>
			</div>

			<!-- 空状态提示 - 我的作品（改为支持刷新按钮与上次刷新时间展示） -->
			<div class="empty-state" v-if="myApps.length === 0 && !myAppsLoading">
				<div class="empty-card">
					<div class="empty-icon">🎨</div>
					<h3>还没有创作作品呢~</h3>
					<p>你可以刷新看看是否有最新作品加载成功，或回到顶部开始创作</p>
					<p v-if="lastMyRefreshTime" class="last-refresh-time">
						上次刷新：{{ lastMyRefreshTime.toLocaleString('zh-CN') }}
					</p>
					<div class="empty-actions">
						<a-button type="default" size="large" @click="refreshMyApps" :loading="refreshingMyApps">
							<template #icon>
								<ReloadOutlined />
							</template>
							{{ refreshingMyApps ? '刷新中...' : '刷新看看' }}
						</a-button>
					</div>
				</div>
			</div>

			<!-- 加载状态提示 - 我的作品 -->
			<div class="loading-state" v-if="myAppsLoading">
				<div class="loading-card">
					<div class="loading-icon">
						<a-spin size="large" />
					</div>
					<p>正在加载你的作品...</p>
				</div>
			</div>

			<!-- 分页 -->
			<div class="pagination-wrapper" v-if="myAppsPagination.total > 0">
				<a-pagination
					v-model:current="myAppsPagination.current"
					v-model:pageSize="myAppsPagination.pageSize"
					:total="myAppsPagination.total"
					:show-size-changer="false"
					:show-quick-jumper="false"
					@change="loadMyApps"
				/>
			</div>
		</div>

		<!-- 精选应用列表 -->
		<div class="apps-section">
			<div class="section-header">
				<h2>精选案例</h2>
				<div class="header-actions">
					<a-select
						v-model:value="sortType"
						placeholder="排序方式"
						class="sort-select"
						@change="handleSortChange"
						:suffixIcon="null"
					>
						<template #suffixIcon>
							<DownOutlined :style="{ color: '#666', fontSize: '12px' }" />
						</template>
						<a-select-option value="latest">
							<div class="sort-option">
								<ClockCircleOutlined />
								<span>最新发布</span>
							</div>
						</a-select-option>
						<a-select-option value="popular">
							<div class="sort-option">
								<FireOutlined />
								<span>最受欢迎</span>
							</div>
						</a-select-option>
						<a-select-option value="quality">
							<div class="sort-option">
								<StarOutlined />
								<span>高质量优先</span>
							</div>
						</a-select-option>
						<a-select-option value="name">
							<div class="sort-option">
								<SortAscendingOutlined />
								<span>名称排序</span>
							</div>
						</a-select-option>
						<a-select-option value="default">
							<div class="sort-option">
								<OrderedListOutlined />
								<span>默认排序</span>
							</div>
						</a-select-option>
					</a-select>
					<a-input-search
						v-model:value="goodAppsSearchText"
						placeholder="搜索精选应用..."
						@search="searchGoodApps"
						@change="onGoodAppsSearchChange"
						class="search-input"
					/>
				</div>
			</div>

			<div class="apps-grid">
				<AppCard
					v-for="(app, index) in goodApps"
					:key="app.id"
					:app="app"
					:is-featured="true"
					:show-actions="false"
					:style="{ animationDelay: `${index * 100}ms` }"
					@view-chat="goToAppChat"

				/>
			</div>

			<!-- 空状态提示 - 精选案例 -->
			<div class="empty-state" v-if="goodApps.length === 0 && !goodAppsLoading">
				<div class="empty-card featured">
					<div class="empty-icon">✨</div>
					<h3>精选案例即将到来</h3>
					<p>管理员正在精心挑选优秀作品，敬请期待~</p>
					<p v-if="lastRefreshTime" class="last-refresh-time">
						上次刷新：{{ lastRefreshTime.toLocaleString('zh-CN') }}
					</p>
					<div class="empty-actions">
						<a-button type="default" size="large" @click="refreshGoodApps" :loading="refreshingGoodApps">
							<template #icon>
								<ReloadOutlined />
							</template>
							{{ refreshingGoodApps ? '刷新中...' : '刷新看看' }}
						</a-button>
					</div>
				</div>
			</div>

			<!-- 加载状态提示 - 精选案例 -->
			<div class="loading-state" v-if="goodAppsLoading">
				<div class="loading-card featured">
					<div class="loading-icon">
						<a-spin size="large" />
					</div>
					<p>正在加载精选案例...</p>
				</div>
			</div>

			<!-- 分页 -->
			<div class="pagination-wrapper" v-if="goodAppsPagination.total > 0">
				<a-pagination
					v-model:current="goodAppsPagination.current"
					v-model:pageSize="goodAppsPagination.pageSize"
					:total="goodAppsPagination.total"
					:show-size-changer="false"
					:show-quick-jumper="false"
					@change="loadGoodApps"
				/>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import { useAppListStatus } from '@/composables/useAppStatus'
import { addApp, listMyAppVoByPage, listGoodAppVoByPage, deleteApp as deleteAppApi } from '@/api/appController'
import {
	SendOutlined,
	ReloadOutlined,
	EditOutlined,
	DownOutlined,
	ClockCircleOutlined,
	RocketOutlined,
	PlayCircleOutlined,
	SortAscendingOutlined,
	OrderedListOutlined,
	FireOutlined,
	StarOutlined,
} from '@ant-design/icons-vue'
import logoImg from '@/assets/logo.png'
import { getDeployUrl } from '@/config/env'
import { AppCard } from '@/components/app'

const router = useRouter()
const loginUserStore = useLoginUserStore()
const { updateFromAppList } = useAppListStatus()

// 用户输入的提示词
const userPrompt = ref('')
const creating = ref(false)

// 打字机效果相关
const currentPlaceholder = ref('')
const placeholderTexts = [
	'创建一个现代化的个人博客网站，集成AI智能写作助手、文章发布编辑器、多维度评论互动系统、全文搜索引擎、RSS订阅推送、文章归档分类、热门推荐算法、SEO优化工具，支持Markdown语法高亮、代码块展示、图片懒加载、深色主题切换，打造极致的阅读和写作体验...',
	'设计一个专业的企业展示网站，融合3D动效展示、产品服务矩阵、客户成功案例、实时在线客服、多语言国际化、团队风采展示、新闻动态发布、招聘信息管理、联系表单收集、地图定位导航，采用响应式设计和微交互动画，全面提升企业品牌形象和用户转化率...',
	'开发一个功能完整的电商购物平台，整合AI智能推荐引擎、商品分类浏览、高级搜索筛选、购物车管理、订单全流程跟踪、用户评价体系、优惠券营销、会员积分系统、多渠道支付、物流查询、客服聊天、数据分析看板，打造从浏览到购买的完整闭环体验...',
	'构建一个专业的个人作品展示平台，集成项目分类管理、案例详情展示、技术栈标签云、在线预览功能、项目时间轴、技能雷达图、GitHub集成、简历下载、联系方式、访客统计、SEO优化、社交分享，采用现代简约设计风格和流畅的滚动动画效果...',
	'创建一个综合性在线教育平台，整合课程分类体系、高清视频播放器、学习进度智能跟踪、在线测试评估、学习笔记云同步、师生互动社区、作业提交批改、证书自动生成、学习数据分析、直播课堂、AI学习助手、个性化推荐算法，全方位提升在线学习效果...',
	'开发一个智能餐厅点餐系统，融合菜品3D展示、营养成分标注、个性化推荐算法、购物车管理、桌号二维码、多种支付方式、订单实时跟踪、评价反馈、会员优惠、积分兑换、后厨管理、数据统计分析，打造从点餐到用餐的全流程数字化体验...',
	'构建一个高效的任务管理和团队协作平台，集成任务创建分配、进度可视化跟踪、优先级智能排序、截止日期提醒、团队实时协作、文件云端共享、时间统计分析、数据报表生成、看板视图、甘特图、日历视图、消息通知，全面提升团队工作效率和项目管理水平...',
	'开发一个现代化社交媒体平台，集成用户身份认证、个人资料管理、动态发布编辑、图片视频分享、点赞评论互动、私信实时聊天、关注粉丝系统、话题标签、内容推荐算法、实时通知推送、隐私设置、数据分析，打造活跃的社交生态圈...',
	'开发一个智能医疗健康管理系统，集成电子健康档案、AI症状自检、在线预约挂号、用药智能提醒、体检报告分析、健康数据可视化、专家在线咨询、可穿戴设备同步、个性化健康建议、疾病预防方案、家庭医生服务、医疗知识库，全方位守护用户健康...',
	'构建一个全屋智能家居控制平台，整合设备统一管理、场景模式切换、定时任务设置、语音智能控制、能耗实时监控、安防报警系统、远程操控、设备状态监测、智能学习算法、自动化场景、节能优化建议、多品牌设备兼容，打造真正的智慧生活体验...',
	'创建一个专业的金融投资分析平台，融合实时股票行情、专业技术分析、基金组合管理、风险评估模型、投资策略建议、财务规划工具、市场资讯推送、数据图表可视化、智能投顾服务、回测分析、投资组合优化、风控预警系统，助力投资者做出明智决策...',
	'开发一个多元化游戏娱乐平台，集成多类型在线游戏、实时排行榜、成就徽章系统、社区互动交流、游戏直播观看、电竞赛事组织、虚拟商城交易、语音聊天、游戏录制分享、个性化推荐、好友系统、公会组织，打造沉浸式的游戏娱乐生态...',
]
let currentTextIndex = 0
let currentCharIndex = 0
let typewriterTimer: number | null = null
let isUserFocused = ref(false)

// 打字机效果函数
const typewriterEffect = () => {
	if (isUserFocused.value || userPrompt.value.length > 0) return

	const currentText = placeholderTexts[currentTextIndex]

	if (currentCharIndex < currentText.length) {
		currentPlaceholder.value = currentText.slice(0, currentCharIndex + 1)
		currentCharIndex++
		typewriterTimer = setTimeout(typewriterEffect, 100)
	} else {
		// 当前文本打完，等待一段时间后切换到下一个文本
		typewriterTimer = setTimeout(() => {
			currentTextIndex = (currentTextIndex + 1) % placeholderTexts.length
			currentCharIndex = 0
			currentPlaceholder.value = ''
			typewriterEffect()
		}, 2000)
	}
}

// 开始打字机效果
const startTypewriter = () => {
	isUserFocused.value = false
	if (!typewriterTimer && userPrompt.value.length === 0) {
		typewriterEffect()
	}
}

// 停止打字机效果
const stopTypewriter = () => {
	isUserFocused.value = true
	if (typewriterTimer) {
		clearTimeout(typewriterTimer)
		typewriterTimer = null
	}
}

// 示例应用
const examples = [
	{
		title: '个人博客网站',
		description:
			'创建一个现代化的个人博客网站，包含文章发布与编辑、分类标签管理、评论互动系统、全文搜索功能、RSS订阅、文章归档和热门推荐。采用简洁清新的设计风格，支持深色/浅色主题切换，完全响应式布局，SEO优化，支持Markdown编辑器',
	},
	{
		title: '企业官网',
		description:
			'设计一个专业的企业展示网站，包含公司简介、团队介绍、产品服务展示、客户案例、新闻动态、招聘信息和在线客服。整体风格专业大气，采用蓝白配色方案，包含动画效果和交互元素，支持多语言切换，集成联系表单和地图定位',
	},
	{
		title: '电商购物平台',
		description:
			'开发一个功能完整的在线购物商城，包含商品分类浏览、智能搜索筛选、购物车管理、订单跟踪、用户评价系统、优惠券功能、会员积分、在线支付和物流查询。界面设计现代时尚，用户体验流畅，完美适配移动端和桌面端',
	},
	{
		title: '作品展示网站',
		description:
			'构建一个专业的个人作品展示平台，支持项目分类管理、详细案例介绍、技术栈标签、在线预览功能、项目时间线、技能雷达图和联系方式。界面采用现代简约设计，突出视觉效果，支持图片懒加载和平滑滚动动画',
	},
	{
		title: '在线教育平台',
		description:
			'创建一个综合性在线学习平台，包含课程分类浏览、视频播放器、学习进度跟踪、在线测试系统、学习笔记、讨论社区、证书生成和学习统计。支持多种学习模式，包含互动练习、直播课堂和作业提交功能',
	},
	{
		title: '餐厅点餐系统',
		description:
			'开发一个智能餐厅点餐系统，包含菜品分类展示、营养信息标注、个性化推荐、购物车管理、桌号选择、在线支付、订单状态跟踪和评价反馈。界面设计美观诱人，支持扫码点餐，包含会员优惠和积分系统',
	},
	{
		title: '任务管理工具',
		description:
			'构建一个高效的任务管理和团队协作平台，包含任务创建分配、进度跟踪、优先级设置、截止日期提醒、团队协作、文件共享、时间统计和数据分析。支持看板视图、甘特图和日历视图，提供丰富的筛选和排序功能',
	},
	{
		title: '社交媒体平台',
		description:
			'开发一个现代化的社交媒体平台，包含用户注册登录、个人资料管理、动态发布、图片视频分享、点赞评论、私信聊天、关注系统、话题标签和内容推荐算法。界面设计时尚现代，支持实时通知和无限滚动加载',
	},
	{
		title: '医疗健康管理',
		description:
			'开发一个智能医疗健康管理系统，包含健康档案管理、症状自检、预约挂号、用药提醒、体检报告分析、健康数据可视化、专家在线咨询、可穿戴设备同步、个性化健康建议、疾病预防方案、家庭医生服务、医疗知识库，全方位守护用户健康...',
	},
	{
		title: '智能家居控制',
		description:
			'构建一个全屋智能家居控制平台，包含设备管理、场景模式、定时任务、语音控制、能耗监控、安防报警和远程操控。支持多品牌设备接入，提供智能学习算法，实现自动化场景切换和节能优化',
	},
	{
		title: '金融投资分析',
		description:
			'创建一个专业的金融投资分析平台，包含股票行情、技术分析、基金组合、风险评估、投资策略、财务规划和市场资讯。提供实时数据图表、智能投顾建议、回测分析和投资组合优化功能',
	},
	{
		title: '游戏娱乐平台',
		description:
			'开发一个多元化游戏娱乐平台，包含在线游戏、排行榜系统、成就系统、社区互动、直播观看、电竞赛事和虚拟商城。支持多人在线对战、语音聊天、游戏录制分享和个性化推荐算法',
	},
]

// 我的应用
const myApps = ref<API.AppVO[]>([])
const myAppsSearchText = ref('')
const myAppsSortType = ref('latest') // 我的应用排序类型
const myAppsLoading = ref(false)
const myAppsPagination = reactive({
	current: 1,
	pageSize: 8,
	total: 0,
})
// 新增：我的应用刷新按钮状态与上次刷新时间
const refreshingMyApps = ref(false)
const lastMyRefreshTime = ref<Date | null>(null)

// 新增：精选应用所需的状态变量，避免模板中 goodApps.length 读取 undefined
const goodApps = ref<API.AppVO[]>([])
const goodAppsSearchText = ref('')
const goodAppsLoading = ref(false)
const refreshingGoodApps = ref(false)
const lastRefreshTime = ref<Date | null>(null)

const sortType = ref('latest') // 排序类型
const goodAppsPagination = reactive({
	current: 1,
	pageSize: 8,
	total: 0,
})

// 处理键盘事件
const handleKeyDown = (e: KeyboardEvent) => {
	// Enter 键发送，Shift+Enter 换行
	if (e.key === 'Enter' && !e.shiftKey) {
		e.preventDefault()
		createApp()
	}
}

// 创建应用
const createApp = async () => {
	if (!userPrompt.value?.trim()) {
		message.warning('请输入您的需求描述')
		return
	}

	if (!loginUserStore.loginUser?.id) {
		message.warning('请先登录')
		router.push('/user/login')
		return
	}

	creating.value = true
	try {
		const res = await addApp({
			initPrompt: userPrompt.value.trim(),
		})
		if (res.data.code === 0 && res.data.data) {
			message.success('应用创建成功！')
			// 跳转到对话页面，保持字符串类型的ID
			router.push(`/app/${res.data.data}`)
		} else {
			message.error('创建失败：' + (res.data.message || '未知错误'))
		}
	} catch (error) {
		console.error('创建应用失败:', error)
		message.error('创建失败，请稍后重试')
	} finally {
		creating.value = false
	}
}

// 使用示例
const useExample = (example: string) => {
	userPrompt.value = example
}

// 跳转到应用对话页面
const goToAppChat = (appId: string | number | undefined) => {
	if (appId) {
		router.push(`/app/${appId}`)
	}
}



// 编辑应用
const editApp = (appId: string | number | undefined) => {
	if (appId) {
		// 在新窗口中打开编辑页面，避免影响当前生成状态
		const editUrl = `${window.location.origin}/app/edit/${appId}`
		window.open(editUrl, '_blank')
	}
}

// 删除应用
const deleteApp = async (appId: string | number | undefined, callback?: (success: boolean) => void) => {
	if (!appId) {
		callback?.(false)
		return
	}

	// 显示删除中的提示
	const hideLoading = message.loading('正在删除应用...', 0)

	try {
		const res = await deleteAppApi({ id: appId as any })

		// 隐藏加载提示
		hideLoading()

		if (res.data.code === 0) {
			message.success('删除成功')
			loadMyApps() // 重新加载我的应用
			callback?.(true)
		} else {
			message.error('删除失败：' + (res.data.message || '未知错误'))
			callback?.(false)
		}
	} catch (error) {
		// 隐藏加载提示
		hideLoading()

		console.error('删除应用失败:', error)
		message.error('删除失败，请稍后重试')
		callback?.(false)
	}
}

// 下线应用
const handleUndeployApp = async (appId: string | number | undefined) => {
	if (!appId) return

	// 重新加载我的应用以更新状态
	loadMyApps()
} // 获取排序字段和排序方式的映射
const getSortFieldAndOrder = (sortType: string) => {
	switch (sortType) {
		case 'latest':
			return { sortField: 'createTime', sortOrder: 'descend' }
		case 'deployed':
			return { sortField: 'deployedTime', sortOrder: 'descend' }
		case 'generating':
			return { sortField: 'createTime', sortOrder: 'descend' }
		case 'name':
			return { sortField: 'appName', sortOrder: 'ascend' }
		case 'popular':
			return { sortField: 'id', sortOrder: 'descend' }
		case 'quality':
			return { sortField: 'priority', sortOrder: 'descend' }
		default:
			return { sortField: undefined, sortOrder: undefined }
	}
}

// 加载我的应用
const loadMyApps = async () => {
	if (!loginUserStore.loginUser?.id) return

	myAppsLoading.value = true
	try {
		const { sortField, sortOrder } = getSortFieldAndOrder(myAppsSortType.value)

		const res = await listMyAppVoByPage({
			current: myAppsPagination.current,
			pageSize: myAppsPagination.pageSize,
			appName: myAppsSearchText.value?.trim(),
			sortField,
			sortOrder,
		})
		if (res.data.code === 0 && res.data.data) {
			const apps = res.data.data.records || []

			myApps.value = apps
			myAppsPagination.total = Number(res.data.data.totalRow) || 0
			// 更新状态管理
			updateFromAppList(myApps.value)
		}
	} catch (error) {
		console.error('加载我的应用失败:', error)
	} finally {
		myAppsLoading.value = false
	}
}

// 加载精选应用
const loadGoodApps = async () => {
	goodAppsLoading.value = true
	try {
		const { sortField, sortOrder } = getSortFieldAndOrder(sortType.value)

		const res = await listGoodAppVoByPage({
			current: goodAppsPagination.current,
			pageSize: goodAppsPagination.pageSize,
			appName: goodAppsSearchText.value?.trim(),
			sortField,
			sortOrder,
		})
		if (res.data.code === 0 && res.data.data) {
			const apps = res.data.data.records || []

			goodApps.value = apps
			goodAppsPagination.total = Number(res.data.data.totalRow) || 0
			// 更新状态管理
			updateFromAppList(goodApps.value)
		}
	} catch (error) {
		console.error('加载精选应用失败:', error)
	} finally {
		goodAppsLoading.value = false
	}
}

// 搜索我的应用
const searchMyApps = () => {
	myAppsPagination.current = 1
	loadMyApps()
}

// 搜索精选应用
const searchGoodApps = () => {
	goodAppsPagination.current = 1
	loadGoodApps()
}

// 处理排序变化
const handleSortChange = (value: string) => {
	sortType.value = value
	goodAppsPagination.current = 1
	loadGoodApps()
}

// 处理我的应用排序变化
const handleMyAppsSortChange = (value: string) => {
	myAppsSortType.value = value
	myAppsPagination.current = 1
	loadMyApps()
}

// 监听搜索框变化
const onMyAppsSearchChange = () => {
	if (!myAppsSearchText.value?.trim()) {
		searchMyApps()
	}
}

const onGoodAppsSearchChange = () => {
	if (!goodAppsSearchText.value?.trim()) {
		searchGoodApps()
	}
}

// 聚焦到输入框（开始创作按钮功能）
const focusInput = () => {
	// 平滑滚动到页面顶部的输入框
	const heroSection = document.querySelector('.hero-section')
	if (heroSection) {
		heroSection.scrollIntoView({
			behavior: 'smooth',
			block: 'start',
		})

		// 等待滚动完成后聚焦输入框
		setTimeout(() => {
			const inputElement = document.querySelector('.prompt-input textarea') as HTMLTextAreaElement
			if (inputElement) {
				inputElement.focus()

				// 如果输入框为空，给出提示
				if (!userPrompt.value.trim()) {
					// 随机选择一个示例作为提示
					const randomExample = examples[Math.floor(Math.random() * examples.length)]
					message.info(`💡 试试创建：${randomExample.title}`)

					// 可选：将示例文本设置为占位符或预填充
					setTimeout(() => {
						if (!userPrompt.value.trim()) {
							inputElement.placeholder = `例如：${randomExample.description}`
						}
					}, 500)
				} else {
					inputElement.select() // 选中已有文本
				}
			}
		}, 500)
	}

	// 显示鼓励信息
	if (userPrompt.value.trim()) {
		message.success('继续完善你的创意吧！')
	} else {
		message.info('🎨 开始创作你的AI应用吧！')
	}
}

// 新增：刷新我的应用（与精选案例刷新逻辑保持一致）
const refreshMyApps = async () => {
	if (refreshingMyApps.value) return

	refreshingMyApps.value = true
	try {
		// 重置到第一页并清空统计
		myAppsPagination.current = 1
		myAppsPagination.total = 0

		// 清空搜索条件
		myAppsSearchText.value = ''

		// 重新加载我的应用
		await loadMyApps()

		// 记录刷新时间
		lastMyRefreshTime.value = new Date()

		const timeStr = lastMyRefreshTime.value.toLocaleTimeString('zh-CN')
		if (myAppsPagination.total > 0) {
			message.success(`🎉 发现了 ${myAppsPagination.total} 个我的作品！(${timeStr})`)
		} else {
			message.info(`🔍 暂无新的作品，请稍后再试 (${timeStr})`)
		}
	} catch (error) {
		console.error('刷新我的作品失败:', error)
		message.error('🚫 刷新失败，请检查网络连接后重试')
	} finally {
		refreshingMyApps.value = false
	}
}

// 新增：刷新精选案例（与我的作品刷新逻辑保持一致）
const refreshGoodApps = async () => {
	if (refreshingGoodApps.value) return

	refreshingGoodApps.value = true
	try {
		// 重置到第一页并清空统计
		goodAppsPagination.current = 1
		goodAppsPagination.total = 0

		// 清空搜索条件
		goodAppsSearchText.value = ''

		// 重新加载精选应用
		await loadGoodApps()

		// 记录刷新时间
		lastRefreshTime.value = new Date()

		const timeStr = lastRefreshTime.value.toLocaleTimeString('zh-CN')
		if (goodAppsPagination.total > 0) {
			message.success(`✨ 已加载 ${goodAppsPagination.total} 个精选案例！(${timeStr})`)
		} else {
			message.info(`🔍 暂无新的精选案例，请稍后再试 (${timeStr})`)
		}
	} catch (error) {
		console.error('刷新精选案例失败:', error)
		message.error('🚫 刷新失败，请检查网络连接后重试')
	} finally {
		refreshingGoodApps.value = false
	}
}

// 组件挂载时加载数据
onMounted(() => {
	loadGoodApps()
	if (loginUserStore.loginUser?.id) {
		loadMyApps()
	}
	// 启动打字机效果
	startTypewriter()
})

// 组件卸载时清理定时器
onUnmounted(() => {
	if (typewriterTimer) {
		clearTimeout(typewriterTimer)
		typewriterTimer = null
	}
})

// 监听登录状态变化
watch(
	() => loginUserStore.loginUser?.id,
	(newId) => {
		if (newId) {
			loadMyApps()
		} else {
			myApps.value = []
		}
	}
)
</script>

<style scoped lang="scss">
// 添加渐变动画
@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#home-page {
	min-height: calc(100vh - 64px);
	background: linear-gradient(135deg, #e8f4fd 0%, #d1f2eb 20%, #e8f8f5 40%, #f0f9ff 60%, #e6fffa 80%, #f0fdfa 100%);
	background-size: 400% 400%;
	animation: gradientShift 15s ease infinite;
	margin: 0;
	padding: 20px;
	max-width: 100%;
	overflow-x: hidden;

	.hero-section {
		text-align: center;
		padding: 40px 20px 40px;
		color: #1a365d;
		background: none;
		border-radius: 0;
		margin: 0;

		.hero-content {
			max-width: 900px;
			margin: 0 auto;
		}

		.main-title {
			font-size: 56px;
			font-weight: 700;
			margin-bottom: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 20px;
			color: #0f4c75;
			text-shadow: 0 2px 10px rgba(15, 76, 117, 0.2);
			white-space: nowrap;
			flex-wrap: wrap;

			.title-icon {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
				flex-shrink: 0;
			}

			span {
				white-space: nowrap;
			}
		}

		.subtitle {
			font-size: 24px;
			margin-bottom: 50px;
			opacity: 0.8;
			line-height: 1.6;
			color: #2d5a87;
			text-shadow: 0 1px 5px rgba(45, 90, 135, 0.1);
		}

		.input-section {
			background: rgba(255, 255, 255, 0.6);
			backdrop-filter: blur(20px);
			border: 1px solid rgba(16, 185, 129, 0.2);
			border-radius: 16px;
			padding: 0;
			margin-bottom: 32px;
			box-shadow: 0 6px 24px rgba(16, 185, 129, 0.08);
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.input-title {
				font-size: 18px;
				font-weight: 500;
				color: #000;
				margin: 0 0 16px 0;
				text-align: left;
				padding: 24px 24px 0;
			}

			.input-content {
				flex: 1;

				.prompt-input {
					background: transparent;
					border: none;
					border-radius: 0;
					font-size: 16px;
					margin: 0;
					box-shadow: none;
					min-height: 120px;
					max-height: 240px;

					:deep(.ant-input) {
						background: transparent;
						font-size: 16px;
						line-height: 1.5;
						padding: 20px 24px;
						min-height: 120px;
						max-height: 240px;
						resize: vertical;
						border: none;
						box-shadow: none;
						border-radius: 0;
					}

					:deep(.ant-input:focus) {
						box-shadow: none;
						border: none;
					}
				}
			}

			.input-actions {
				display: flex;
				gap: 12px;
				justify-content: flex-end;
				align-items: center;
				padding: 16px 24px;
				background: rgba(255, 255, 255, 0.3);
				border-top: 1px solid rgba(16, 185, 129, 0.1);
				margin: 0;

				.input-tip {
					font-size: 11px;
					color: #4a5568;
					margin-right: 6px;
				}

				.char-count {
					font-size: 11px;
					color: #9ca3af;
					margin-right: 8px;
					font-weight: 500;
				}

				.create-btn {
					height: 42px;
					padding: 0 24px;
					font-size: 14px;
					font-weight: 600;
					background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
					border: none;
					color: white;
					border-radius: 10px;

					&:hover:not(:disabled) {
						transform: translateY(-1px);
						box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
					}

					.create-icon {
						margin-right: 8px;
					}
				}

				.clear-btn {
					height: 48px;
					padding: 0 24px;
					background: rgba(255, 255, 255, 0.1);
					border: 2px solid rgba(255, 255, 255, 0.3);
					color: white;

					&:hover {
						background: rgba(255, 255, 255, 0.2);
						border-color: rgba(255, 255, 255, 0.5);
						color: white;
					}
				}
			}
		}

		.example-section {
			.example-buttons {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				grid-template-rows: repeat(2, 1fr);
				gap: 20px;
				max-width: 1200px;
				margin: 0 auto;
				padding: 0 20px;

				.example-btn {
					position: relative;
					background: linear-gradient(
						135deg,
						rgba(15, 23, 42, 0.95) 0%,
						rgba(30, 41, 59, 0.95) 50%,
						rgba(51, 65, 85, 0.95) 100%
					);
					border: 1px solid rgba(59, 130, 246, 0.3);
					color: #e2e8f0;
					border-radius: 16px;
					padding: 18px 14px;
					font-size: 14px;
					font-weight: 600;
					transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
					cursor: pointer;
					text-align: center;
					height: 70px;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
					backdrop-filter: blur(10px);
					overflow: hidden;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100%;
						background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
						transition: left 0.6s ease;
					}

					&::after {
						content: '';
						position: absolute;
						top: -2px;
						left: -2px;
						right: -2px;
						bottom: -2px;
						background: linear-gradient(45deg, #3b82f6, #8b5cf6, #06b6d4, #10b981);
						border-radius: 18px;
						z-index: -1;
						opacity: 0;
						transition: opacity 0.4s ease;
						animation: borderGlow 3s linear infinite;
					}

					&:hover {
						background: linear-gradient(
							135deg,
							rgba(59, 130, 246, 0.9) 0%,
							rgba(139, 92, 246, 0.9) 50%,
							rgba(16, 185, 129, 0.9) 100%
						);
						border-color: rgba(59, 130, 246, 0.8);
						color: #ffffff;
						transform: translateY(-5px) scale(1.02);
						box-shadow: 0 12px 40px rgba(59, 130, 246, 0.4), 0 0 20px rgba(59, 130, 246, 0.3),
							inset 0 1px 0 rgba(255, 255, 255, 0.2);
						text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

						&::before {
							left: 100%;
						}

						&::after {
							opacity: 1;
						}
					}

					&:active {
						transform: translateY(-2px) scale(0.98);
					}
				}

				// 响应式布局
				@media (max-width: 1200px) {
					grid-template-columns: repeat(4, 1fr);
					grid-template-rows: repeat(3, 1fr);
				}

				@media (max-width: 768px) {
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(6, 1fr);
					gap: 12px;
					padding: 0 16px;

					.example-btn {
						height: 50px;
						padding: 12px 8px;
						font-size: 13px;
					}
				}

				@media (max-width: 480px) {
					grid-template-columns: 1fr;
					grid-template-rows: repeat(12, 1fr);
				}
			}
		}
	}

	.apps-section {
		margin: 48px auto;
		max-width: 1400px;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32px;
			padding-bottom: 16px;
			border-bottom: 2px solid #f0f0f0;

			h2 {
				font-size: 28px;
				font-weight: 700;
				color: #262626;
				margin: 0;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					bottom: -16px;
					left: 0;
					width: 60px;
					height: 3px;
					background: linear-gradient(90deg, #1890ff, #52c41a);
					border-radius: 2px;
				}
			}

			.header-actions {
				display: flex;
				align-items: center;
				gap: 16px;

				@media (max-width: 768px) {
					flex-direction: column;
					align-items: stretch;
					gap: 12px;
				}

				.sort-select {
					width: 160px;

					@media (max-width: 768px) {
						width: 100%;
					}

					:deep(.ant-select-selector) {
						border-radius: 8px;
						border: 1px solid #e8e8e8;
						transition: all 0.3s ease;

						&:hover {
							border-color: #1890ff;
						}

						.ant-select-selection-item {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							gap: 8px;
							padding: 0 4px;
						}

						.ant-select-selection-placeholder {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							color: #999;
						}
					}

					:deep(.ant-select-focused .ant-select-selector) {
						border-color: #1890ff;
						box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
					}

					/* 下拉框样式优化 */
					:deep(.ant-select-dropdown) {
						border-radius: 12px;
						box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
						border: 1px solid #f0f0f0;
						padding: 8px 0;
					}

					:deep(.ant-select-item) {
						padding: 0;
						margin: 2px 8px;
						border-radius: 8px;
						transition: all 0.2s ease;

						&:hover {
							background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
						}

						&.ant-select-item-option-selected {
							background: linear-gradient(135deg, #e6f7ff 0%, #d6f7ff 100%);
							border: 1px solid #91d5ff;
						}

						&.ant-select-item-option-active {
							background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
						}
					}
				}

				.sort-option {
					display: flex;
					align-items: center;
					gap: 10px;
					padding: 12px 16px;
					border-radius: 8px;
					transition: all 0.2s ease;
					cursor: pointer;
					position: relative;

					&:hover {
						transform: translateY(-1px);
					}

					.anticon {
						font-size: 16px;
						color: #1890ff;
						min-width: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					span {
						font-size: 14px;
						color: #333;
						font-weight: 500;
						letter-spacing: 0.3px;
					}

					/* 为不同的选项添加特色图标颜色 */
					&:nth-child(1) .anticon {
						color: #52c41a; /* 绿色 - 最新 */
					}

					&:nth-child(2) .anticon {
						color: #fa8c16; /* 橙色 - 部署 */
					}

					&:nth-child(3) .anticon {
						color: #1890ff; /* 蓝色 - 生成中 */
					}

					&:nth-child(4) .anticon {
						color: #722ed1; /* 紫色 - 名称 */
					}

					&:nth-child(5) .anticon {
						color: #eb2f96; /* 粉色 - 热门 */
					}

					&:nth-child(6) .anticon {
						color: #faad14; /* 金色 - 质量 */
					}

					&:nth-child(7) .anticon {
						color: #666; /* 灰色 - 默认 */
					}
				}

				.search-input {
					width: 300px;

					@media (max-width: 768px) {
						width: 100%;
					}

					:deep(.ant-input-search) {
						.ant-input {
							border-radius: 8px;
							border: 1px solid #e8e8e8;
						}

						.ant-input-search-button {
							border-radius: 0 8px 8px 0;
						}
					}
				}
			}
		}

		.apps-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
			gap: 24px;
			margin-bottom: 40px;

			/* 确保卡片最大宽度，避免过宽 */
			@media (min-width: 1400px) {
				grid-template-columns: repeat(4, 1fr);
			}

			@media (max-width: 1200px) {
				grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
				gap: 20px;
			}
		}

		.pagination-wrapper {
			display: flex;
			justify-content: center;
			margin-top: 40px;
			padding-top: 32px;
			border-top: 1px solid #f0f0f0;

			:deep(.ant-pagination) {
				.ant-pagination-item {
					border-radius: 8px;
					border: 1px solid #e8e8e8;

					&.ant-pagination-item-active {
						background: #1890ff;
						border-color: #1890ff;

						a {
							color: white;
						}
					}
				}

				.ant-pagination-prev,
				.ant-pagination-next {
					border-radius: 8px;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	#home-page {
		padding: 16px;

		.hero-section {
			padding: 40px 0 60px;

			.main-title {
				font-size: 32px;
				flex-direction: column;
				gap: 12px;

				.title-icon {
					width: 40px;
					height: 40px;
				}
			}

			.subtitle {
				font-size: 16px;
			}

			.input-section {
				padding: 0;
				margin-bottom: 24px;

				.input-title {
					font-size: 16px;
					margin-bottom: 12px;
					padding: 16px 16px 0;
				}

				.input-content {
					.prompt-input {
						font-size: 15px;

						:deep(.ant-input) {
							font-size: 15px;
							padding: 16px 18px;
							min-height: 100px;
						}
					}
				}

				.input-actions {
					flex-direction: column;
					align-items: stretch;
					gap: 8px;
					padding: 12px 16px;

					.input-tip,
					.char-count {
						text-align: center;
						margin-right: 0;
						margin-bottom: 6px;
						font-size: 10px;
					}

					.create-btn {
						width: 100%;
						height: 38px;
						font-size: 13px;
					}
				}
			}

			.example-section {
				.example-buttons {
					flex-wrap: wrap;
					gap: 8px;
					max-width: 100%;

					.example-btn {
						font-size: 12px;
						padding: 8px 16px;
						min-width: calc(50% - 4px);
						height: 36px;
					}
				}
			}
		}

		.apps-section {
			.section-header {
				flex-direction: column;
				gap: 16px;
				align-items: stretch;

				.header-actions .search-input {
					width: 100%;
				}
			}

			.apps-grid {
				grid-template-columns: 1fr;

				.app-card .app-content .app-info-layout {
					gap: 10px;

					.user-avatar {
						:deep(.ant-avatar) {
							width: 32px !important;
							height: 32px !important;
							font-size: 14px;
						}
					}

					.app-details {
						.app-title-row .app-title {
							font-size: 15px;
						}

						.app-author {
							span:first-child {
								font-size: 13px;
							}

							.app-time {
								font-size: 11px;
							}
						}
					}
				}
			}
		}
	}

	// 空状态样式
	.empty-state {
		padding: 40px 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.empty-card {
			text-align: center;
			padding: 40px 60px;
			background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
			border-radius: 20px;
			border: 1px solid #e2e8f0;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
			transition: all 0.3s ease;
			max-width: 480px;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
			}

			&.featured {
				background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
				border-color: #fbbf24;

				.empty-icon {
					background: linear-gradient(135deg, #fbbf24, #f59e0b);
				}
			}

			.empty-icon {
				font-size: 48px;
				margin-bottom: 20px;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background: linear-gradient(135deg, #64748b, #475569);
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 auto 20px auto;
				animation: gentle-bounce 2s ease-in-out infinite;
			}

			h3 {
				color: #1e293b;
				font-size: 20px;
				font-weight: 600;
				margin-bottom: 12px;
			}

			p {
				color: #64748b;
				font-size: 14px;
				line-height: 1.6;
				margin-bottom: 24px;
			}

			.last-refresh-time {
				color: #94a3b8;
				font-size: 12px;
				margin-bottom: 16px;
				font-style: italic;
			}

			.empty-actions {
				:deep(.ant-btn) {
					border-radius: 12px;
					height: 44px;
					padding: 0 24px;
					font-weight: 500;
					font-size: 14px;

					&.ant-btn-primary {
						background: linear-gradient(135deg, #3b82f6, #2563eb);
						border: none;
						box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

						&:hover {
							background: linear-gradient(135deg, #2563eb, #1d4ed8);
							transform: translateY(-1px);
							box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
						}
					}

					&.ant-btn-default {
						background: white;
						border-color: #d1d5db;
						color: #374151;

						&:hover {
							border-color: #9ca3af;
							color: #111827;
							transform: translateY(-1px);
						}
					}
				}
			}
		}
	}

	// 加载状态样式
	.loading-state {
		padding: 40px 0;
		display: flex;
		justify-content: center;
		align-items: center;

		.loading-card {
			text-align: center;
			padding: 40px 60px;
			background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
			border-radius: 20px;
			border: 1px solid #e2e8f0;
			max-width: 400px;

			&.featured {
				background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
				border-color: #fbbf24;
			}

			.loading-icon {
				margin-bottom: 20px;

				:deep(.ant-spin-dot) {
					font-size: 32px;
				}
			}

			p {
				color: #64748b;
				font-size: 14px;
				margin: 0;
			}
		}
	}

	@keyframes gentle-bounce {
		0%,
		100% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-8px);
		}
	}

	// 响应式适配
	@media (max-width: 768px) {
		.empty-state {
			padding: 20px 0;

			.empty-card {
				padding: 30px 24px;
				margin: 0 20px;

				.empty-icon {
					font-size: 36px;
					width: 60px;
					height: 60px;
				}

				h3 {
					font-size: 18px;
				}

				p {
					font-size: 13px;
				}

				.empty-actions {
					:deep(.ant-btn) {
						height: 40px;
						padding: 0 20px;
						font-size: 13px;
					}
				}
			}
		}

		.loading-state {
			padding: 20px 0;

			.loading-card {
				padding: 30px 24px;
				margin: 0 20px;

				.loading-icon {
					:deep(.ant-spin-dot) {
						font-size: 24px;
					}
				}

				p {
					font-size: 13px;
				}
			}
		}
	}
}
</style>

<!-- 全局样式用于下拉选项 -->
<style lang="scss">
// 选择器文本样式修复
.ant-select {
	.ant-select-selector {
		.ant-select-selection-item {
			display: flex !important;
			align-items: center !important;
			justify-content: flex-start !important;
			gap: 8px !important;
			padding: 0 4px !important;

			.sort-option {
				display: flex !important;
				align-items: center !important;
				gap: 8px !important;
				width: 100% !important;

				.anticon {
					font-size: 14px !important;
					min-width: 14px !important;
					flex-shrink: 0 !important;
				}

				span {
					font-size: 14px !important;
					font-weight: 500 !important;
					color: #333 !important;
				}
			}

			.ant-select-selection-placeholder {
				display: flex !important;
				align-items: center !important;
				justify-content: flex-start !important;
				color: #999 !important;
			}
		}

		.ant-select-selection-placeholder {
			display: flex !important;
			align-items: center !important;
			justify-content: flex-start !important;
			color: #999 !important;
		}
	}
}

// 排序选项下拉面板样式优化
.ant-select-dropdown {
	border-radius: 12px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
	border: 1px solid #f0f0f0 !important;
	padding: 8px 0 !important;
	overflow: hidden;

	.ant-select-item {
		padding: 0 !important;
		margin: 2px 8px !important;
		border-radius: 8px !important;
		transition: all 0.2s ease !important;

		&:hover {
			background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
		}

		&.ant-select-item-option-selected {
			background: linear-gradient(135deg, #e6f7ff 0%, #d6f7ff 100%) !important;
			border: 1px solid #91d5ff !important;

			.sort-option {
				.anticon {
					color: #1890ff !important;
				}

				span {
					color: #1890ff !important;
					font-weight: 600 !important;
				}
			}
		}

		&.ant-select-item-option-active {
			background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
		}

		.sort-option {
			display: flex !important;
			align-items: center !important;
			gap: 10px !important;
		}
	}
}

// 科技风格动画关键帧
@keyframes borderGlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.8;
	}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}
</style>
